<template>
  <div class="full-screen-item">
    <div class="hello-world" ref="hello">
      <span v-for="v in welcome" class="word" :style="v.style">
        {{v.word}}
      </span>
    </div>
  <tr-scroll-word :words="words"></tr-scroll-word>
  </div>
</template>

<script>
  export default {
    name: "TheFullScreenItem",
    data() {
      return {
        words:['I`m here','always here'],
        welcome:[
          {word:'H'},
          {word:'E'},
          {word:'L'},
          {word:'L'},
          {word:'O'},
          {word:'',style:{padding:'0 14px'}},
          {word:'2'},
          {word:'0'},
          {word:'1'},
          {word:'9'},
          ],
      }
    },
    mounted() {
      setTimeout(() => {
        this.$refs.hello.style.opacity = 1;
        this.$refs.hello.style.transform = 'translateY(0)';
      }, 0)
    },
  }
</script>

<style lang="stylus">
  .full-screen-item
    position relative
    width 100%
    height 85vh
    padding-top 1px
    /*background url("../assets/img/63323113_p0.jpg") no-repeat center*/
    background #9bccc3
    background-size cover
    /*中间的标题*/
    > .hello-world
      position relative
      text-align center
      top 40%
      opacity 0
      transform translateY(200px)
      transition: transform 1s ease, opacity .6s ease;
      /*中间的标题的内容*/
      > .word
        cursor pointer
        overflow hidden
        display inline-block
        font-size 56px
        font-family hey_elsie_cuteregular
        text-shadow: 1px 1px 0 #000000, -1px -1px 0 #b184da;
        color #dde3f1
        margin 0 4px
        &:first-child
          font-size 80px
        &:hover
          transition 0s
          opacity .6 !important
  //小于648px 标题响应式变化
  @media screen and (max-width: 648px) {
    .full-screen-item {
      background url("../assets/img/bg_m1.jpg") no-repeat center
      height 100vh
      background-size cover
      > .hello-world{
        >.word{
          font-size 42px
          &:first-child{
            font-size 60px
          }

        }
      }

    }
  }


</style>
